import { useEffect, useState } from "react"
import s from "./style.module.less"
import { Button, ImageUploader, Input, Toast } from "antd-mobile"
import { useNavigate } from "react-router-dom"
import { editApi, getUserInfoApi, upLoadImg } from "@/apis"

function UserInfo() {
  const navigateTo = useNavigate() // 路由实例
  const [user, setUser] = useState({}) // 用户
  const [avatar, setAvatar] = useState("") // 头像
  const [signature, setSignature] = useState("") // 个签
  const token = localStorage.getItem("token") // 登录令牌
  const [fileList, setFileList] = useState([])

  const getUserInfo = async () => {
    const { data } = await getUserInfoApi()
    setUser(data.data)
    setAvatar(data.data.avatar)
    setSignature(data.data.signature)
  }

  function beforeUpload(file) {
    if (file.size > 200 * 1024) {
      Toast.show("请选择小于 200KB 的图片")
      return null
    }
    return file
  }

  const mockUpload = async (file) => {
    let formData = new FormData()
    formData.append("file", file)
    const { data } = await upLoadImg(formData, token)
    setAvatar("http://api.chennick.wang" + data.data)
    return {
      url: avatar,
    }
  }

  // 编辑用户信息方法
  const save = async () => {
    const { data } = await editApi({ signature, avatar })
    Toast.show("修改成功")
    // 成功后回到个人中心页面
    navigateTo(-1)
  }

  useEffect(() => {
    getUserInfo()
  }, [])
  return (
    <div className={s.userinfo}>
      <div className={s.header}>用户信息</div>
      <div className={s.content}>
        <h1>个人资料</h1>
        <div className={s.item}>
          <div className={s.title}>头像</div>
          <div className={s.avatar}>
            <img className={s.avatarUrl} src={avatar} alt="" />
            <div
              style={{
                height: "115px",
                display: "flex",
                justifyContent: "space-around",
                flexDirection: "column",
              }}
            >
              <span>支持jpg、png、jpeg格式大小200KB以内的图片</span>
              <ImageUploader
                maxCount={1}
                value={fileList}
                deletable={false}
                upload={mockUpload}
                beforeUpload={beforeUpload}
                children={
                  <Button color="primary" fill="solid">
                    点击上传
                  </Button>
                }
              />
            </div>
          </div>
        </div>
        <div className={s.item}>
          <div className={s.title}>个性签名</div>
          <div className={s.signature}>
            <Input
              clearable
              type="text"
              value={signature}
              placeholder="请输入个性签名"
              onChange={(value) => setSignature(value)}
              className={s.input}
            />
          </div>
        </div>
        <Button
          onClick={save}
          style={{ marginTop: "50px", height: "61px", fontSize: "23px" }}
          block
          color="primary"
        >
          保存
        </Button>
      </div>
    </div>
  )
}

export default UserInfo
